<template>
  <div class="app-container">
    <el-row class="tac">
      <!-- <el-col :span="12" style="width: 55%;"> -->
      <el-col :span="12">
        <el-select id="cj_select" v-model="selectedScene" placeholder="请选择战场场景">
          <el-option
            v-for="item in scenetable"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @click.native="getSslListBySceneID(item.value)"
          />
        </el-select>
        <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        height="35vh"
        @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="杀伤链"
            sortable
            width="100">
            <template slot-scope="scope">{{ "杀伤链-"+scope.row.id }}</template>
          </el-table-column>
          <el-table-column
            prop="spyEquipment"
            label="侦察探测装备"
            width="150">
          </el-table-column>
          <el-table-column
            prop="identificationEquipment"
            label="指挥控制装备"
            width="150">
          </el-table-column>
    <!--      <el-table-column-->
    <!--        prop="decisionEquipment"-->
    <!--        label="火力打击装备"-->
    <!--        width="200">-->
    <!--      </el-table-column>-->
          <el-table-column
            prop="strikeEquipment"
            label="火力打击装备"
            width="150">
          </el-table-column>
          <el-table-column
            prop="p0"
            label="发现定位辨别性(%)"
            width="140">
          </el-table-column>
          <el-table-column
            prop="p1"
            label="跟踪瞄准辨别性(%)"
            width="140">
          </el-table-column>
          <el-table-column
            prop="p2"
            label="打击评估辨别性(%)"
            width="140">
          </el-table-column>
          <el-table-column
            prop="precision"
            label="准确度(%)"
            width="120"
            sortable
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
      
        <div style="margin-top: 20px">
          <el-button @click="toggleSelection([tableData[1], tableData[2]])">选择</el-button>
          <!-- <el-button @click="toggleSelection()">取消选择</el-button> -->
        </div>
      </el-col>
      <el-col :span="12">
        <!-- Flex布局的容器 -->
        <div class="flex-container">
          <!-- 三个等宽的div -->
          <!-- <div class="flex-item" id="timeChain">Div 1</div> -->
          <!-- <div class="flex-item" id="precisionChain">Div 2</div> -->
          <div class="flex-item" id="accuracyChain">Div 3</div>
    
        </div>
      </el-col>
    </el-row>
  </div>
</template>

  <script>
  import * as echarts from 'echarts';
  import axios from 'axios';
  import { getList, getChainInfo, getSslListBySceneID, getSceneList } from '@/api/ssl'
  export default {
    data() {
      return {
        selectedScene:null,
        scenetable:[],
        echartsInstances: [], // 用于存储 ECharts 实例
        tableData: [],
        multipleSelection: [],
        timeChainOption: {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
              }
            },
            legend: {},
            grid: {
              left: '5%',
              right: '5%',
              bottom: '3%',
              containLabel: true
            },
            yAxis: {
              type: 'value',
              position: 'right',
              name: '时间/s'
            },
            xAxis: {
              type: 'category',
              // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              data:[]
            },
            series: [
              {
                name: 'F1发现',
                type: 'bar',
                stack: 'total',
                label: {
                  show: true
                },
                emphasis: {
                  focus: 'series'
                },
                data: [320, 302, 301, 334, 390, 330, 320]
              },
              {
                name: 'F2定位',
                type: 'bar',
                stack: 'total',
                label: {
                  show: true
                },
                emphasis: {
                  focus: 'series'
                },
                data: [10, 1320, 101, 134, 90, 230, 210]
              },
              {
                name: 'T1跟踪',
                type: 'bar',
                stack: 'total',
                label: {
                  show: true
                },
                emphasis: {
                  focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
              },
              {
                name: 'T2瞄准',
                type: 'bar',
                stack: 'total',
                label: {
                  show: true
                },
                emphasis: {
                  focus: 'series'
                },
                data: [150, 212, 201, 154, 190, 330, 410]
              },
              {
                name: 'E打击',
                type: 'bar',
                stack: 'total',
                label: {
                  show: true
                },
                emphasis: {
                  focus: 'series'
                },
                data: [820, 832, 901, 934, 1290, 1330, 1320]
              },
              {
                name: 'A评估',
                type: 'bar',
                stack: 'total',
                label: {
                  show: true
                },
                emphasis: {
                  focus: 'series'
                },
                data: [820, 832, 901, 934, 1290, 1330, 1320]
              }
            ]
          },
        precisionChainOption:{
            xAxis: {
              type: 'category',
              // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              data:[]
            },
            yAxis: {
              name:'准确度/%',
              position:'right',
              type: 'value',
            },
            grid: {
              left: '5%',
              right: '5%',
              bottom: '3%',
              containLabel: true
            },
            series: [
              {
                data: [
                  120,
                  {
                    value: 200,
                    itemStyle: {
                      color: '#a90000'
                    }
                  },
                  150,
                  80,
                  70,
                  110,
                  130
                ],
                label: {
                  show: true
                },
                emphasis: {
                  focus: 'series'
                },
                type: 'bar'
              }
            ]
          },
        accuracyChainOption:{
            xAxis: {
              type: 'category',
              // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              data:[]
            },
            yAxis: {
              name:'准确度/%',
              position:'right',
              type: 'value'
            },
            grid: {
              left: '5%',
              right: '5%',
              bottom: '3%',
              containLabel: true
            },
            series: [
              {
                data: [
                  120,
                  {
                    value: 200,
                    itemStyle: {
                      color: '#a90000'
                    }
                  },
                  150,
                  80,
                  70,
                  110,
                  130
                ],
                label: {
                  show: true
                },
                emphasis: {
                  focus: 'series'
                },
                type: 'bar'
              }
            ]
          }
      }
    },

    methods: {
      // check() {
      //   var id = this.$route.query.id;
      //   var index = null;
      //   if (id) {
      //     for(let i = 0; i < this.tableData.length; i += 1) {
      //       if (this.tableData[i].id === parseInt(id)) {
      //         index = i
      //         break
      //       }
      //     }
      //     this.$refs.multipleTable.toggleRowSelection(this.tableData[index])
      //     this.handleSelectionChange([this.tableData[index]])
      //   }

      // },
      getssl(){
        if(this.selectedScene==null){
        return 
      }
      const scene_id = parseInt(this.selectedScene.match(/\d+/)[0])
      console.log("sceneId")
      console.log(scene_id)
        getList(scene_id)
        .then(response => {
          console.log("getssl/getlist")
          console.log(response)
          // Assuming the response contains an array of SSL data
          this.tableData = response.data.map(item => {
              // 使用replace方法去掉字符串两侧的方括号
              const modifiedItem = {
                  ...item,
                  spyEquipment: item.spyEquipment.replace(/^\[|\]$/g, ''),
                  identificationEquipment: item.identificationEquipment.replace(/^\[|\]$/g, ''),
                  // decisionEquipment: item.decisionEquipment.replace(/^\[|\]$/g, ''),
                  strikeEquipment: item.strikeEquipment.replace(/^\[|\]$/g, '')
              };
              
              return modifiedItem;
          });
          this.tableData.forEach(item => {
            item.time = item.time.toFixed(2);
            item.accuracy=(item.accuracy*100.0).toFixed(2);
            item.precision=(item.precision*100.0).toFixed(2);
            item.interceptionP=(item.interceptionP*100.0).toFixed(2);
            item.p0=(item.p0*100.0).toFixed(2);
            item.p1=(item.p1*100.0).toFixed(2);
            item.p2=(item.p2*100.0).toFixed(2);
          });
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
      },
      getChainInfoHelp(idList){
        getChainInfo(idList)
          //axios.post('http://localhost:8081/ssl/chainInfo',idList)
          .then(response => {
            // 处理后端的响应
            console.log(response);
            this.timeChainOption.xAxis.data=this.multipleSelection.map(item => "杀伤链-"+item.id)
            this.precisionChainOption.xAxis.data=this.multipleSelection.map(item => "杀伤链-"+item.id)
            this.accuracyChainOption.xAxis.data=this.multipleSelection.map(item => "杀伤链-"+item.id)
            this.timeChainOption.series[0].data=response.data.t0
            this.timeChainOption.series[1].data=response.data.t1
            this.timeChainOption.series[2].data=response.data.t2
            this.timeChainOption.series[3].data=response.data.t3
            this.timeChainOption.series[4].data=response.data.t4
            this.timeChainOption.series[5].data=response.data.t5
            this.precisionChainOption.series[0].data=response.data.v.map(item=>(item*100).toFixed(2))
            this.accuracyChainOption.series[0].data=response.data.p.map(item=>(item*100).toFixed(2))
            this.drawLine()
          })
          .catch(error => {
            // 处理请求错误
            console.error(error);
          });
      },
      getChainInfo(){
        const idList=this.multipleSelection.map(item => item.id)
        console.log(idList);
        this.getChainInfoHelp(idList);
      },
      toggleSelection() {
        this.getChainInfo()
        this.drawLine()
        // if (rows) {
        //   rows.forEach(row => {
        //     this.$refs.multipleTable.toggleRowSelection(row);
        //   });
        // } else {
        //   this.$refs.multipleTable.clearSelection();
        // }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      drawLine() {
          // 初始化echarts实例
          // let timeChain = echarts.init(document.getElementById('timeChain'))
          // let precisionChain = echarts.init(document.getElementById('precisionChain'))
          let accuracyChain = echarts.init(document.getElementById('accuracyChain'))
          this.echartsInstances = [accuracyChain];
          // 绘制图表
          // timeChain.setOption(this.timeChainOption);
          // precisionChain.setOption(this.precisionChainOption)
          accuracyChain.setOption(this.accuracyChainOption)
          this.reloadPage()
        },
      reloadPage() {
        // 页面刷新
        this.echartsInstances.forEach(instance => {
          instance.resize();
        });
      },
      handleRouter(){
        this.getSslListBySceneID(this.selectedScene)
      },
      getScene(){
        getSceneList()
          .then(response=>{
            console.log("sl403",response);
            this.scenetable=response.data.map(item=>{
              return{
                value:'选项'+item.sceneId,//设置value的值
                // label:'战场场景'+item.sceneId//设置label的值
                label:item.name
              }
            })
          })
      },
      getSslListBySceneID(selectedValue){
        
        console.log("getSslListBySceneID");
        if(selectedValue==null)
          return
        console.log(selectedValue);
        this.selectedScene=selectedValue
        this.getssl()
        
        const ssl_id = parseInt(selectedValue.match(/\d+/)[0])
        // getSslListBySceneID(ssl_id)
        //   .then(response=>{
        //     console.log(response.data)
        //     console.log(response.data)
        //     var idList = []
        //     for(let i=0;i<response.data.length;i++){
        //       idList.push(response.data[i].sslId)
        //     }
        //     // console.log(idList)
        //     this.getChainInfoHelp(idList)
        //   })
      },
    },
    mounted() {
      this.getScene()
      console.log("sceneId"+this.$route.query.selectedScene);
      this.selectedScene = this.$route.query.selectedScene;
      this.handleRouter();
      // this.handleRouter()
      this.getssl();
      this.getChainInfo();
      // await this.drawLine();
      // this.check();
      window.addEventListener('resize', this.reloadPage);
    },
    beforeDestroy() {
    window.removeEventListener('resize', this.reloadPage);
    },
  }
  </script>

<style scoped>
  .line{
    text-align: center;
  }
  .flex-container {
    margin-top: 20px; /* 设置顶部边距以区分三个div */
    /* display: flex; */
    height: 50vh; /* 设置高度为视口高度的50% */
  }
  .tac{
    height: 50vh;
  }
  .flex-item {
    display: flex;
    flex: 1;
    border: 1px solid #ccc; /* 添加边框以示区分 */
    padding: 10px; /* 添加内边距以美化样式 */
    height: 80%;
    /* width: 90%; */
  }
  .app-container{
    width:100%
  }
</style>

